<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .grid {
          margin: auto;
          width: 530px;
          text-align: center;
        }
        .grid table {
          border-top: 1px solid #C2D89A;
          width: 100%;
          border-collapse: collapse;
        }
        .grid th,td {
          padding: 10px;
          border: 1px dashed orange;
          height: 35px;
          line-height: 35px;
        }
        .grid th {
          background-color: orange;
        }
        .grid .book {
          padding-bottom: 10px;
          padding-top: 5px;
          background-color: orange;
        }
        .grid .total {
      height: 30px;
      line-height: 30px;
      background-color: orange;
      border-top: 1px solid #C2D89A;
    }
      </style>
</head>
<body>
     <div id="app">
    <div class="grid">
        <div>
            <h1>图书管理</h1>
            <div class="book">
              <div>
                <label for="id">
                  编号：
                </label>
                <!-- :disabled 动态生成禁用状态，一定要记得：哦 -->
                <input type="text" id="id" v-focus v-model='id' :disabled='true'>
                <label for="name">
                  名称：
                </label>
                <input type="text" id="name" v-model.lazy='name'>
                <button @click='addBooks' :disabled='subFlag'>提交</button>
              </div>
            </div>
          </div>
          <div class="total">
              <span>图书总数：</span>
              <span>{{total}}</span>
          </div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr :key='item.id' v-for='(item,i) in books'>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <!-- 'yyyy-MM-dd'这个参数和下面的形参format相对应，这样更灵活的显示年月日的格式 -->
            <td>{{item.date | datefm('yyyy-MM-dd') }}</td>
            <td>
              <!-- @click.prevent 阻止跳转 -->
              <a href="" @click.prevent='toEdit(item)'>修改</a>
              <span>|</span>
              <a href="" @click.prevent='toDel(item.id)'>删除 {{ i }}</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
    <script src="./js/vue.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/time.js"></script>
    <script>
      Vue.directive('focus',{
        inserted(el){
          el.focus();
        }
      })
      Vue.filter('datefm',function(time,format){
        return dateFormat(time,format)
      })
      // 配置公共域名
      axios.defaults.baseURL='http://localhost:3000'
      // 利用响应拦截器配置返回数据
      axios.interceptors.response.use(function(res){
        return res.data
      })
      var vm = new Vue({
          el: '#app',
          data: {
            flag:false,
            id:'',
            subFlag:false,
            name:'',
            books: []
          },
          created(){
              this.getBooks() 
          },
          methods:{
            // 利用axios请求获取图书数据
            // 利用async修饰函数getBooks
            async getBooks(){
              // 利用await修饰Promise实例对象
              this.books = await axios.get('/books')
            },
            // 添加图书
            async addBooks(){
              // this.flag为true则为修改，false为添加
              if(this.flag){
                // this.flag为true则为修改,要找到图书id对其进行书名的修改
                // 发送请求修改数据，id以restful形式传递，name以对象的形式
               var data = await axios.put('books/'+this.id,{
                 name:this.name
               })
               console.log(data);
               
               if(data.status == 200){
                    this.getBooks()
                  }
                // 修改成功后要把flag重新设置为false
                this.flag = false
              }else {
                // this.flag为false为添加
                var data = await axios.post('/books',{name:this.name})
                  console.log(data);
                  // 如果data.status == 200,代表添加成功
                  if(data.status == 200){
                    this.getBooks()
                  }
               }
              // 添加成功后将输入框重置为空
              this.name = this.id = '';
            },
            // 修改图书
             toEdit:async function(item){
              // 禁止修改id
              var data = await axios.get('books/'+ item.id)
              console.log(data);
              this.id = data.id;
              this.name = data.name
              this.flag = true;
            },
            toDel:async function(id){
              var data = await axios.delete('books/' + id)
              console.log(data);
              // 如果status：200，删除成功
              if(data.status == 200){
                this.getBooks()
              }
              
            }
          },
          // 监视用户输入的书名是否存在，存在就阻止添加
          // 使用some()进行循环遍历
          watch:{
            name:async function(val){
              // var flag = this.books.some(item=>{
              //   return item.name == this.name
              // })
              // if(flag){
              //   this.subFlag = true
              // }else{
              //   this.subFlag = false                
              // }
              var data = await axios.get(`/books/book/${val}`)
              console.log(data);
              
              if(data.status ==2){
                this.subFlag = false
              }else{
                this.subFlag =true           
              }
            }

          },
          computed:{
            total:function(){
              return this.books.length
            }
          }
        });
    </script>
</body>
</html>